<template>
  <div class="material-standards-container">
    <!-- 选项卡 -->
    <el-tabs v-model="activeTab" class="custom-tabs">
      <el-tab-pane label="厚度优秀样本" name="thickness"></el-tab-pane>
      <el-tab-pane label="边缘优秀样本" name="edge"></el-tab-pane>
    </el-tabs>

    <!-- 内容区域 -->
    <div class="content-wrapper">
       <!-- 搜索区域 -->
      <div class="search-panel">
        <div class="search-row">
          <div class="search-item time-selection">
            <span class="label">时间</span>
            <el-radio-group v-model="searchParams.timeType" size="small">
              <el-radio-button label="start">开始时间</el-radio-button>
              <el-radio-button label="end">出库结束时间</el-radio-button>
            </el-radio-group>
            <el-date-picker 
              v-model="searchParams.dateRange" 
              type="daterange" 
              range-separator="至" 
              start-placeholder="开始日期"
              end-placeholder="结束日期" 
              class="custom-date-picker" 
              size="small"
              style="margin-left: 10px; width: 240px;" 
            />
          </div>
           <div class="search-item">
            <span class="label">硅含量</span>
            <el-input v-model="searchParams.siliconContent" placeholder="请输入" class="custom-input" size="small" style="width: 100px;"/>
          </div>
           <div class="search-item">
            <span class="label">产品厚度区间</span>
            <el-select v-model="searchParams.thicknessRange" placeholder="请选择" clearable class="custom-select" size="small" style="width: 140px;">
              <el-option label="6.0:0.55-0.7" value="6.0:0.55-0.7" />
              <el-option label="3.0:0.32-0.4" value="3.0:0.32-0.4" />
              <el-option label="4.0:1100.0-1150.0" value="4.0:1100.0-1150.0" />
            </el-select>
          </div>
          <div class="search-item">
            <span class="label">产品宽度区间</span>
            <el-select v-model="searchParams.widthRange" placeholder="请选择" clearable class="custom-select" size="small" style="width: 160px;">
              <el-option label="2.0:1000.0-1050.0" value="2.0:1000.0-1050.0" />
              <el-option label="6.0:1200.0-1250.0" value="6.0:1200.0-1250.0" />
               <el-option label="3.0:1050.0-1100.0" value="3.0:1050.0-1100.0" />
            </el-select>
          </div>
           <div class="search-item">
            <span class="label">钢种</span>
            <el-select v-model="searchParams.steelGrade" placeholder="请选择" clearable class="custom-select" size="small" style="width: 100px;">
               <el-option label="35-MKD" value="35-MKD" />
               <el-option label="2368" value="2368" />
            </el-select>
          </div>
        </div>
         <div class="search-row">
           <div class="search-item">
            <span class="label">冷卷号</span>
            <el-input v-model="searchParams.coldRollNo" placeholder="请输入" class="custom-input" size="small" />
          </div>
          <div class="search-item">
            <span class="label">热卷号</span>
            <el-input v-model="searchParams.hotRollNo" placeholder="请输入" class="custom-input" size="small" />
          </div>
           <div class="search-actions">
            <button class="btn query-btn" @click="handleSearch">查询</button>
            <button class="btn reset-btn" @click="handleReset">重置</button>
            <button class="btn export-btn">导出</button>
          </div>
        </div>
      </div>

       <!-- 表格和列选择器 -->
      <div class="table-area-wrapper">
        <!-- 表格主体 -->
        <div class="table-panel">
           <el-table
            :data="pagedTableData"
            style="width: 100%;"
            height="100%"
            border
            highlight-current-row
            size="small"
            :header-cell-style="{ background: '#2a5caa', color: '#fff', padding: '4px 8px', textAlign: 'center', fontWeight: 'normal', border: 'none' }"
            :cell-style="{ padding: '4px 8px', textAlign: 'center', color: '#c0c4cc', border: 'none' }"
            :row-style="{ background: '#0f2142' }"
          >
            <el-table-column type="index" label="序号" width="60" align="center" :index="indexMethod" fixed="left" />
            
            <!-- Dynamically shown columns -->
            <el-table-column v-if="isColumnVisible('coldRollNo')" prop="coldRollNo" label="冷卷号" width="120" />
            <el-table-column v-if="isColumnVisible('hotRollNo')" prop="hotRollNo" label="热卷号" width="120" />
            <el-table-column v-if="isColumnVisible('steelGrade')" prop="steelGrade" label="钢种" width="80" />
            <el-table-column v-if="isColumnVisible('siliconContent')" prop="siliconContent" label="硅含量" width="80" />
            <el-table-column v-if="isColumnVisible('thicknessRange')" prop="thicknessRange" label="产品厚度区间" width="140" />
            <el-table-column v-if="isColumnVisible('widthRange')" prop="widthRange" label="产品宽度区间" width="160" />
            <el-table-column v-if="isColumnVisible('edgeScore')" prop="edgeScore" label="边缘评分" width="90" />
            <el-table-column v-if="isColumnVisible('prodTime')" prop="prodTime" label="生产时间" width="160" />

            <el-table-column v-if="isColumnVisible('f1ForcePreset')" label="1#轧制力设定实际偏差值" width="100" align="center" prop="f1ForcePreset" />
            <el-table-column v-if="isColumnVisible('f2ForcePreset')" label="2#轧制力设定实际偏差值" width="100" align="center" prop="f2ForcePreset"/>
            <el-table-column v-if="isColumnVisible('f3ForcePreset')" label="3#轧制力设定实际偏差值" width="100" align="center" prop="f3ForcePreset"/>
            <el-table-column v-if="isColumnVisible('f4ForcePreset')" label="4#轧制力设定实际偏差值" width="100" align="center" prop="f4ForcePreset"/>
            <el-table-column v-if="isColumnVisible('f5ForcePreset')" label="5#轧制力设定实际偏差值" width="100" align="center" prop="f5ForcePreset"/>

            <el-table-column v-if="isColumnVisible('f1TensionActual')" label="1#带钢张力实际值" width="100" align="center" prop="f1TensionActual"/>
            <el-table-column v-if="isColumnVisible('f2TensionActual')" label="2#带钢张力实际值" width="100" align="center" prop="f2TensionActual"/>
            <el-table-column v-if="isColumnVisible('f3TensionActual')" label="3#带钢张力实际值" width="100" align="center" prop="f3TensionActual"/>
            <el-table-column v-if="isColumnVisible('f4TensionActual')" label="4#带钢张力实际值" width="100" align="center" prop="f4TensionActual"/>

            <el-table-column v-if="isColumnVisible('f1EntrySpeed')" label="1机架入口速度[MPA]" width="120" align="center" prop="f1EntrySpeed"/>
            <el-table-column v-if="isColumnVisible('f23RollGapSpeed')" label="2-3机架间带钢张力[MPA]" width="130" align="center" prop="f23RollGapSpeed"/>
            <el-table-column v-if="isColumnVisible('f34RollGapSpeed')" label="3-4机架间带钢张力[MPA]" width="130" align="center" prop="f34RollGapSpeed"/>
            <!-- Add more columns here based on the image... -->
             <el-table-column v-if="isColumnVisible('f4ExitSpeed')" label="4机架出口速度[MPA]" width="120" align="center" prop="f4ExitSpeed"/> 

           </el-table>
        </div>
        <!-- 列选择器 -->
        <div class="column-selector">
           <el-checkbox 
            v-model="checkAll" 
            :indeterminate="isIndeterminate" 
            @change="handleCheckAllChange"
            size="small"
            >
            全选
            </el-checkbox>
            <el-checkbox-group v-model="visibleColumns" @change="handleCheckedColumnsChange">
            <el-checkbox v-for="col in allColumns" :key="col.prop" :label="col.prop" size="small">
                {{ col.label }}
            </el-checkbox>
            </el-checkbox-group>
        </div>
      </div>

       <!-- 分页区域 -->
      <div class="pagination-panel">
         <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            small 
          />
      </div>
    </div>

     <!-- Placeholder for edge analysis tab -->
     <div v-if="activeTab === 'edge'" class="content-wrapper-placeholder">
        边缘优秀样本内容待添加...
     </div>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';

// --- Interfaces --- 
interface SearchParams {
  timeType: string; // 'start' or 'end'
  dateRange: Date[];
  siliconContent: string;
  thicknessRange: string;
  widthRange: string;
  steelGrade: string;
  coldRollNo: string;
  hotRollNo: string;
}

// Define the extensive TableRow interface based on columns
interface TableRow {
  id: number;
  coldRollNo: string;
  hotRollNo: string;
  steelGrade: string;
  siliconContent: number;
  thicknessRange: string;
  widthRange: string;
  edgeScore: number;
  prodTime: string;
  f1ForcePreset: number;
  f2ForcePreset: number;
  f3ForcePreset: number;
  f4ForcePreset: number;
  f5ForcePreset: number;
  f1TensionActual: number;
  f2TensionActual: number;
  f3TensionActual: number;
  f4TensionActual: number;
  f1EntrySpeed: number;
  f23RollGapSpeed: number;
  f34RollGapSpeed: number;
  f4ExitSpeed: number;
  // ... Add potentially dozens more properties based on the full table
}

interface ColumnOption {
  prop: keyof TableRow; 
  label: string;
}

// --- State --- 
const activeTab = ref('thickness');
const searchParams = reactive<SearchParams>({
  timeType: 'start',
  dateRange: [],
  siliconContent: '',
  thicknessRange: '',
  widthRange: '',
  steelGrade: '',
  coldRollNo: '',
  hotRollNo: ''
});

// --- Mock Table Data (Simplified Example) ---
const allTableData = ref<TableRow[]>(Array.from({ length: 31064 }, (_, i) => ({
  id: i + 1,
  coldRollNo: `M308017${String(700 + i).padStart(4, '0')}`,
  hotRollNo: `M231055${String(200 + i).padStart(3, '0')}Y`,
  steelGrade: i % 4 === 0 ? '35-MKD' : '2368',
  siliconContent: 0,
  thicknessRange: i % 3 === 0 ? '6.0:0.55-0.7' : '3.0:0.32-0.4',
  widthRange: i % 3 === 0 ? '2.0:1000.0-1050.0' : '3.0:1050.0-1100.0',
  edgeScore: parseFloat((99 + Math.random()).toFixed(3)),
  prodTime: `2023-08-09 14:${String(10 + i % 50).padStart(2, '0')}:${String(10 + i % 60).padStart(2, '0')}`,
  f1ForcePreset: 0,
  f2ForcePreset: 0,
  f3ForcePreset: 0,
  f4ForcePreset: 0,
  f5ForcePreset: 0,
  f1TensionActual: parseFloat((9.13 - i * 0.1).toFixed(2)),
  f2TensionActual: parseFloat((-21.3 + i * 0.1).toFixed(2)),
  f3TensionActual: parseFloat((11.56 + i * 0.05).toFixed(2)),
  f4TensionActual: parseFloat((-7.82 - i * 0.01).toFixed(2)),
  f1EntrySpeed: 0,
  f23RollGapSpeed: parseFloat((138.13 + i * 0.5).toFixed(2)),
  f34RollGapSpeed: parseFloat((148.6 + i * 0.2).toFixed(2)),
  f4ExitSpeed: parseFloat((150.77 + i * 0.1).toFixed(2)),
})));

// --- Column Visibility --- 
// Define ALL columns based on image for the selector
const allColumns = ref<ColumnOption[]>([
  { prop: 'coldRollNo', label: '冷卷号' },
  { prop: 'hotRollNo', label: '热卷号' },
  { prop: 'steelGrade', label: '钢种' },
  { prop: 'siliconContent', label: '硅含量' },
  { prop: 'thicknessRange', label: '产品厚度区间' },
  { prop: 'widthRange', label: '产品宽度区间' },
  { prop: 'edgeScore', label: '边缘评分' },
  { prop: 'prodTime', label: '生产时间' },
  { prop: 'f1ForcePreset', label: '1#轧制力设定实际偏差值' },
  { prop: 'f2ForcePreset', label: '2#轧制力设定实际偏差值' },
  { prop: 'f3ForcePreset', label: '3#轧制力设定实际偏差值' },
  { prop: 'f4ForcePreset', label: '4#轧制力设定实际偏差值' },
  { prop: 'f5ForcePreset', label: '5#轧制力设定实际偏差值' },
  { prop: 'f1TensionActual', label: '1#带钢张力实际值' },
  { prop: 'f2TensionActual', label: '2#带钢张力实际值' },
  { prop: 'f3TensionActual', label: '3#带钢张力实际值' },
  { prop: 'f4TensionActual', label: '4#带钢张力实际值' },
  { prop: 'f1EntrySpeed', label: '1机架入口速度[MPA]' },
  { prop: 'f23RollGapSpeed', label: '2-3机架间带钢张力[MPA]' },
  { prop: 'f34RollGapSpeed', label: '3-4机架间带钢张力[MPA]' },
  { prop: 'f4ExitSpeed', label: '4机架出口速度[MPA]' },
  // ... Add ALL other columns shown in the selector pane of the image
]);

// Initially show a subset of columns
const defaultVisibleProps: Array<keyof TableRow> = [
  'coldRollNo', 'hotRollNo', 'steelGrade', 'thicknessRange', 'widthRange', 
  'edgeScore', 'prodTime', 'f1TensionActual', 'f2TensionActual', 'f3TensionActual', 'f4TensionActual', 
  'f23RollGapSpeed', 'f34RollGapSpeed'
];
const visibleColumns = ref<Array<keyof TableRow>>([...defaultVisibleProps]);
const checkAll = ref(defaultVisibleProps.length === allColumns.value.length); 
const isIndeterminate = ref(defaultVisibleProps.length > 0 && defaultVisibleProps.length < allColumns.value.length);

const isColumnVisible = (prop: keyof TableRow) => {
  return visibleColumns.value.includes(prop);
};

const handleCheckAllChange = (val: boolean) => {
  visibleColumns.value = val ? allColumns.value.map(c => c.prop) : [];
  isIndeterminate.value = false;
};

const handleCheckedColumnsChange = (value: Array<keyof TableRow>) => {
  const checkedCount = value.length;
  checkAll.value = checkedCount === allColumns.value.length;
  isIndeterminate.value = checkedCount > 0 && checkedCount < allColumns.value.length;
};

// --- Pagination --- 
const pagination = reactive({
  currentPage: 1,
  pageSize: 20, // Default to 20 as per image
  total: allTableData.value.length
});

const pagedTableData = computed(() => {
  const start = (pagination.currentPage - 1) * pagination.pageSize;
  const end = start + pagination.pageSize;
  // Filtering logic would go here if search was implemented
  return allTableData.value.slice(start, end);
});

const indexMethod = (index: number) => {
  return (pagination.currentPage - 1) * pagination.pageSize + index + 1;
};

const handleSizeChange = (val: number) => {
  pagination.pageSize = val;
  pagination.currentPage = 1;
};

const handleCurrentChange = (val: number) => {
  pagination.currentPage = val;
};

// --- Handlers --- 
const handleSearch = () => {
  console.log('查询参数:', searchParams);
  // Reset to page 1 on new search
  pagination.currentPage = 1;
  // Add filtering logic here
};

const handleReset = () => {
  Object.keys(searchParams).forEach(key => {
    const typedKey = key as keyof SearchParams;
    if (typedKey === 'dateRange') searchParams[typedKey] = [];
    else if (typedKey === 'timeType') searchParams[typedKey] = 'start';
    else searchParams[typedKey] = '';
  });
  pagination.currentPage = 1;
  console.log('重置参数');
};

</script>

<style scoped>
.material-standards-container {
  background-color: #0a1a3a;
  color: #c0c4cc;
  padding: 15px;
  height: 100%; 
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
  font-size: 13px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Custom Tabs */
:deep(.custom-tabs .el-tabs__header) { margin: 0 0 10px 0; }
:deep(.custom-tabs .el-tabs__nav-wrap::after) { background-color: #3a5a8a; height: 1px; }
:deep(.custom-tabs .el-tabs__item) { color: #c0c4cc; font-size: 14px; height: 35px; line-height: 35px; }
:deep(.custom-tabs .el-tabs__item.is-active) { color: #409eff; }
:deep(.custom-tabs .el-tabs__active-bar) { background-color: #409eff; }

.content-wrapper {
   flex-grow: 1;
   min-height: 0;
   display: flex;
   flex-direction: column;
}

.content-wrapper-placeholder {
   flex-grow: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #5a7aa4;
}

/* Search Panel */
.search-panel {
  background-color: #1c2d5a;
  padding: 10px 15px;
  border-radius: 3px;
  flex-shrink: 0;
  margin-bottom: 10px;
}
.search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 5px;
}
.search-row:last-child { margin-bottom: 0; }
.search-item {
  display: flex;
  align-items: center;
  margin-right: 10px; 
  margin-bottom: 5px; 
}
.label { 
  color: #c0c4cc;
  margin-right: 5px;
  white-space: nowrap;
  min-width: 85px; /* Adjusted for longer labels */
  text-align: right; 
  font-size: 12px;
}
.time-selection .label { min-width: 40px; }

:deep(.el-radio-button__inner) {
    background-color: #0a1a3a;
    border-color: #3a5a8a;
    color: #c0c4cc;
    box-shadow: none !important;
    font-size: 12px;
    padding: 5px 10px;
}
:deep(.el-radio-button__original-radio:checked+.el-radio-button__inner) {
    background-color: #2979ff;
    border-color: #2979ff;
    color: #fff;
}

:deep(.custom-date-picker.el-date-editor) {
  height: 28px;
  background-color: #0a1a3a;
  border: 1px solid #3a5a8a;
  box-shadow: none;
}
:deep(.custom-date-picker .el-range-input), :deep(.custom-date-picker .el-range-separator) { color: #c0c4cc; font-size: 12px; height: 26px; line-height: 26px; }
:deep(.custom-date-picker .el-range-separator) { padding: 0 2px; }
:deep(.custom-date-picker .el-input__icon) { line-height: 28px; color: #c0c4cc; font-size: 12px; }

.custom-input,
.custom-select,
:deep(.el-input__wrapper),
:deep(.el-select__wrapper) { 
  height: 28px;
  line-height: 28px;
  background-color: #0a1a3a !important;
  border: 1px solid #3a5a8a !important;
  border-radius: 3px !important;
  color: #c0c4cc !important;
  box-shadow: none !important;
  font-size: 12px !important; /* Smaller font */
}
:deep(.el-input__inner) { color: #c0c4cc !important; height: 26px !important; line-height: 26px !important; }
:deep(.custom-select .el-select__placeholder), 
:deep(.custom-select .el-select__caret) { color: #c0c4cc; }

.custom-input { width: 140px; }
.custom-select { width: 120px; }

.search-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding-left: 10px; 
}
.btn {
  height: 28px;
  padding: 0 12px;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 8px;
  color: #fff;
}
.query-btn { background-color: #2979ff; }
.query-btn:hover { background-color: #5393ff; }
.reset-btn { background-color: #3a5a8a; }
.reset-btn:hover { background-color: #5a7aa4; }
.export-btn { background-color: #2979ff; }
.export-btn:hover { background-color: #5393ff; }

/* Table Area */
.table-area-wrapper {
  display: flex;
  flex-grow: 1;
  min-height: 0;
  gap: 10px;
}
.table-panel {
  flex-grow: 1; 
  min-width: 0; 
  overflow: hidden;
  background-color: #1c2d5a;
  padding: 5px;
  border-radius: 3px;
  display: flex;
}
/* Column Selector */
.column-selector {
  flex-shrink: 0;
  width: 200px; 
  background-color: #1c2d5a;
  border: 1px solid #3a5a8a;
  border-radius: 4px;
  padding: 10px 15px;
  overflow-y: auto;
  height: 100%; 
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #3a5a8a #142a52;
}
.column-selector .el-checkbox-group {
  display: flex;
  flex-direction: column;
}
.column-selector .el-checkbox {
  color: #c0c4cc; 
  margin-right: 0;
  margin-bottom: 4px; 
  height: 24px; /* Adjust height for small checkbox */
}
:deep(.column-selector .el-checkbox__label) { font-size: 12px; padding-left: 6px; }
:deep(.column-selector .el-checkbox__inner) { background-color: #0a1a3a; border-color: #3a5a8a; }
:deep(.column-selector .el-checkbox__input.is-checked .el-checkbox__inner), 
:deep(.column-selector .el-checkbox__input.is-indeterminate .el-checkbox__inner) { background-color: #2979ff; border-color: #2979ff; }

/* Pagination Panel */
.pagination-panel { 
  background-color: #1c2d5a; 
  padding: 5px 15px; 
  border-radius: 3px; 
  display: flex; 
  justify-content: flex-end; 
  align-items: center; 
  flex-shrink: 0; 
  margin-top: 10px;
}
/* Deep pagination styles (adjust for small size) */
:deep(.el-pagination button), :deep(.el-pager li) { min-width: 22px; height: 22px; padding: 0 6px; margin: 0 2px; font-size: 12px; }
:deep(.el-pagination__jump .el-input__wrapper) { height: 22px; line-height: 22px; width: 35px; font-size: 12px; }
:deep(.el-pagination__jump .el-input__inner) { height: 20px !important; line-height: 20px !important; }
:deep(.el-pagination__sizes .el-select .el-input__wrapper) { height: 22px; line-height: 22px; font-size: 12px !important; width: 80px; }
:deep(.el-pagination__sizes .el-select .el-input__inner) { height: 20px !important; line-height: 20px !important; }

/* Table Styles */
:deep(.el-table--small .el-table__cell) { padding: 4px 0; }
:deep(.el-table .el-table__cell) { text-align: center; } 

</style>
